<template>
<div class="ksec">
	<div class="kleft">
		<ul>
			<li v-for="a in booklist">{{a.catalog}}</li>
		</ul>
	</div>
	<div class="kright">
		<img class="rimg" src="../../../static/img1/620x150_dl_20170623.jpg"/>
		<div id="bookbox">
			<dl id="lbox" v-for="b in booklista">
			<dt><img :src="b.img"/></dt>
			<dd>{{b.title}}</dd>
			</dl>
			
		</div>
	</div>
</div>
</template>

<script>
	
	export default {
		data(){
			return {
				booklist: [],
				booklista:[]
			}
		},
		methods:{
			request(){
				this.$http({
					url: 'http://localhost:8080/req',
					params: {
						
					},
					method: 'GET'
				}).then(function(req){
					// console.log(req);
					//var result = JSON.parse(req.body);
					//this.dataList = result.data;
					
					this.booklist = req.body.result;
				});
				this.$http({
					url: 'http://localhost:8080/request',
					params: {
						
					},
					method: 'GET'
				}).then(function(req){
					// console.log(req);
					//var result = JSON.parse(req.body);
					//this.dataList = result.data;
					
					this.booklista = req.body.result.data;
				});
				
			}
		},
		mounted(){
			this.request();
		},
	}
</script>

<style>
	header{
		display: flex;
	}
     .ksec{
     	width: 10rem;
     	height: 100%;
     	overflow: scroll;
     }
	.kleft{
		width: 3rem;
		position: absolute;
		top: 0;
		bottom: 0;
		overflow: scroll;
	}
	.kright{
		width: 7rem;
		position: absolute;
		left: 3rem;
		right: 0;
		top: 0;
		bottom: 0;
		overflow: scroll;
	}
	.rimg{
		width: 7rem;
	}
	.kleft ul li{
		width: 3rem;
		line-height: 1rem;
		height: 1rem;
		text-align: center;
	}
	#bookbox{
		display: flex;
		flex-wrap: wrap;
		margin-top: 1rem;
	}
	#lbox dl{
		width: 1rem;
		margin-right: 3rem;
		font-size: 0.375rem;
		
	}
	#lbox img{
		width: 1rem;
		height: 1.5rem;
	}
	#lbox dd{
		width: 2.3rem;
		text-align: center;
	}
	#lbox dt{
		text-align: center;
	}
</style>